<template>
    <div>


        <div style="margin: 10px 0">
            <el-input v-model="point" style="width: 200px" placeholder="请输入积分数"
                      suffix-icon="el-icon-search"></el-input>

            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
            <el-button type="primary" @click="open">新增 <i class="el-icon-circle-plus-outline"></i></el-button>


        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
                 size="medium"
        >

            <el-table-column

                    width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="username" label="用户名" width="200">
            </el-table-column>
            <el-table-column prop="point" label="积分">
            </el-table-column>
            <el-table-column prop="money" label="价格/元">
            </el-table-column>
            <el-table-column prop="time" label="上传时间"    :formatter="dateFormat">
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">

                    <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button  @click="delete1(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog
                title="新增积分"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" label-width="120px">

                <el-form-item label="上传积分">
                    <el-input v-model="form.point"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="实付现金/元">
                    <el-input v-model="form.money"  autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>

        </el-dialog>


        <el-dialog
                title="更新"
                :visible.sync="Visible"
                width="30%">
            <el-form :model="form1" label-width="120px">
                <el-form-item label="上传人">
                    <el-input v-model="form1.username"  disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上传积分">
                    <el-input v-model="form1.point"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="实付现金/元">
                    <el-input v-model="form1.money"  autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import request from '../utils/request'

    export default {
        name: "Point",
        data() {
            return {
                form1:{},
                Visible:false,
                options: [{
                    value: '1',
                    label: '管理员'
                }, {
                    value: '0',
                    label: '普通用户'
                }],
                roles: [],
                headerBg: 'headerBg',
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 5,
                point:"",
                dialogVisible: false,
                form: {},
                //批量删除
                multipleSelection: []
            }
        },
        created() {
            //请求数据
            this.load()

        },
        methods: {

            dateFormat(row, column, cellValue, index) {
                console.log(row, column, cellValue, index)
                const daterc = row[column.property]
                if (daterc != null) {
                    var date = new Date(daterc);
                    var year = date.getFullYear();
                    /* 在日期格式中，月份是从0开始，11结束，因此要加0
                     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                     * */
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    // 拼接
                    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                }
            }
            ,


            //删除
            delete1(id) {
                this.$confirm('确定删除此条的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.delete("/point/delete/" + id).then(res => {
                        if (res) {
                            this.$toast({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.load()
                        } else {
                            this.$toast({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }

                    })

                }).catch(() => {
                    this.$toast({
                        type: 'success',
                        message: '已取消删除'
                    });
                });
            },

            //更新
            edit(row) {
                this.form1 = row
                this.Visible = true
            },

            update() {

                request.put("/point/updatePoint", this.form1).then(res => {
                    if (res.code===20000) {
                        this.$toast({
                            type: "success",
                            message: "更新成功"

                        })
                        this.Visible = false

                        this.load()
                    } else {
                        this.$toast({
                            type: "error",
                            message: "更新失败"
                        })
                    }
                })
            },

            //新增
            save() {

                request.post("/point/addPoint", this.form).then(res => {
                    if (res.code===20000) {
                        this.$toast({
                            type: "success",
                            message: "保存成功"

                        })
                        this.dialogVisible = false
                        this.load()
                    } else {
                        this.$toast({
                            type: "error",
                            message: "保存失败"
                        })
                    }
                })
            },
            //新增弹窗
            open() {
                this.dialogVisible = true
                this.form = {}
            },
            //重置
            reset() {
                this.point=""
                this.load()
            },

            //分页
            load() {
                request.get("/point/page", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,

                        point: this.point
                    }
                }).then(res => {
                    this.tableData = res.records
                    this.total = res.total
                })




                /* fetch("http://localhost:9091/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username+"&nickname="+this.nickname).then(res => res.json()).then(res => {
                     console.log(res)
                     this.tableData = res.data
                     this.total = res.total
                 })*/
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.load()

            },
            handleCurrentChange(val) {
                this.pageNum = val

                this.load()
            }
        }
    }
</script>

<style>
    .headerBg {
        background: #eee !important;
    }
</style>
